<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>易趣五子棋游戏-游戏结束、重新开始及游戏打包</title>
		
		<style>
			.a{
				background-image: url(img/22.jpg);
			}
		</style>
		
	</head>
	<body>
		
		<canvas id="canvas" class="a" onclick="a(event)"></canvas>
		
		<script>
			
			var position=new Array();
			var canvas=document.getElementById('canvas');
			
			var color=0;
			var close=0;
			
			init();
			
			initposition();
			
			function init(){
				//var canvas=document.getElementById('canvas');
				canvas.width=360;
				canvas.height=600;
			}
			
			function initposition(){
				for(var i=0;i<10;i++){
					position[i]=new Array();
					for(var j=0;j<12;j++){
						position[i][j]="0";
					}
				}
			}
			
			function a(e){
				x=e.clientX;
				y=e.clientY;
				
				x1=parseInt((x-34)/32.6);
				y1=parseInt((y-120)/32.6);
				
				x11=34+x1*32.6;
				y11=120+y1*32.6;
				
				
				if(x>=18&&x<=80&&y>=88&&y<=104){
					alert("重新开始");
					canvas.height=600;
					initposition();
					close=0;
				}
				
				
				if(x<34||x>328||y<120||y>514){
					return;
				}
				
				if(close==1){
					alert("已结束，请重新开始！");
					return;
				}
				
				if(position[x1][y1]==0){
					if(color==0){
						createArc(x11,y11,color);
						color=1;
						position[x1][y1]=1;
					}
					else if(color==1){
						createArc(x11,y11,color);
						color=0;
						position[x1][y1]=2;
					}
				}
				
				updown(x1,y1,color);
				
				leftandright(x1,y1,color);
				
				leftupandrightdown(x1,y1,color);
				
				rightupandleftdown(x1,y1,color);
				
			}
			
			function createArc(x,y,z){
				var context=canvas.getContext('2d');
				if(z==1){
					context.fillStyle="red";					
				}
				
				if(z==0){
					context.fillStyle="black";
				}
				
				context.beginPath();
				context.arc(x+10,y+10,16,Math.PI*2,0,true);
				context.fill();
				
			}
			
			function updown(x1,y1,color){
				var sum=1;
				
				//向上判断
				for(var i=1;i<5;i++){
					if(y1-i<0){
						break;
					}
					if(position[x1][y1]==position[x1][y1-i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				//向下判断
				
				for(var i=1;i<5;i++){
					if(y1+i>12){
						break;
					}
					if(position[x1][y1]==position[x1][y1+i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				if(sum>=5){
					if(color==1){
						alert("黑棋获胜，游戏结束！");
					}
					else{
						alert("红棋获胜，游戏结束！");
					}
					close=1;
				}
			}
			
			//水平方向的判断
			
			function leftandright(x1,y1,color){
				var sum=1;
				
				//向左判断
				for(var i=1;i<5;i++){
					if(x1-i<0){
						break;
					}
					if(position[x1][y1]==position[x1-i][y1]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				//向右判断
				
				for(var i=1;i<5;i++){
					if(y1+i>10){
						break;
					}
					if(position[x1][y1]==position[x1+i][y1]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				if(sum>=5){
					if(color==1){
						alert("黑棋获胜，游戏结束！");
					}
					else{
						alert("红棋获胜，游戏结束！");
					}
					
					close=1;
				}
			}
			
			//左上右下
			
			function leftupandrightdown(x1,y1,color){
				var sum=1;
				
				//向左上判断
				for(var i=1;i<5;i++){
					if(x1-i<0){
						break;
					}
					
					if(y1-i<0){
						break;
					}
					
					
					if(position[x1][y1]==position[x1-i][y1-i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				//向右下判断
				
				for(var i=1;i<5;i++){
					if(x1+i>9){
						break;
					}
					if(y1+i>12){
						break;
					}
					if(position[x1][y1]==position[x1+i][y1+i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				if(sum>=5){
					if(color==1){
						alert("黑棋获胜，游戏结束！");
					}
					else{
						alert("红棋获胜，游戏结束！");
					}
					
					close=1;
				}
			}
			
			//右上左下
			
			function rightupandleftdown(x1,y1,color){
				var sum=1;
				
				//向右上判断
				for(var i=1;i<5;i++){
					if(y1-i<0){
						break;
					}
					
					if(x1+i>9){
						break;
					}
					
					
					if(position[x1][y1]==position[x1+i][y1-i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				//向左下判断
				
				for(var i=1;i<5;i++){
					if(y1+i>12){
						break;
					}
					if(x1-i<0){
						break;
					}
					if(position[x1][y1]==position[x1-i][y1+i]){
						sum+=1;
					}
					else{
						break;
					}
				}
				
				if(sum>=5){
					if(color==1){
						alert("黑棋获胜，游戏结束！");
					}
					else{
						alert("红棋获胜，游戏结束！");
					}
					
					close=1;
				}
			}
			
			
			
		</script>
		
	</body>
</html>
